<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" th:href="@{/css/login/userInfo.css}" type="text/css" media="screen"/>

</head>
<body>

<div class="topcd" th:include="~{common/top}"></div>

<div class="box2">
    <div class="parent">
        <div class="child1">
            <div id="backLink">
                <a th:href="@{/catalog/main}" ><img class="backImg" th:src="@{/images/back.png}"></a>
            </div>
            <div class="pic">
                <img  th:src="@{/images/login/phonecat2.gif}">
            </div>
        </div>
        <div class="child2">
            <form  action="/account/update" method="post" id="newAccountForm" th:object="${account}">
                <div class="userInfo">
                    <table>
                        <h3 class="title">User Information</h3>

                        <tr>
                            <td class="td"><font color='red'>*</font>User ID:</td>
                            <td th:text="${session.username}"></td>>
                        </tr>

                        <tr>
                            <td class="td"><font color='red'>*</font>New password:</td>
                            <td><input type="password" name="password" id="password" th:field="*{password}" required/>
                                <div id="isPwd"></div></td>
                        </tr>

                        <tr>
                            <td class="td"><font color='red'>*</font>Repeat password:</td>
                            <td><input type="password" name="repeatedPassword" id="repeatedPassword"/>
                                <div id="isRePwd"></div></td>
                        </tr>
                        <!--<tr>
                            <td><font color='red'>*</font>Verification Code:</td>
                            <td><input type="text" name="verificationCode" />
                                <div id="isVerify"></div></td>
                            <td><a href="account?pre=register"><img id="img" src="verifyCode"  alt=""></a></td>
                        </tr>-->



                    </table>


                    <table>
                        <h3 class="title">Account Information</h3>

                        <tr>
                            <td class="td">First name:</td>
                            <td><input type="text" name="firstName" th:value="${account.firstName}" />
                            </td>
                        </tr>
                        <tr>
                            <td class="td">Last name:</td>
                            <td><input type="text" name="lastName" th:value="${account.lastName}"/></td>
                        </tr>
                        <tr>
                            <td class="td">Email:</td>
                            <td><input type="text" name="email" th:value="${account.email}" /></td>
                        </tr>
                        <tr>
                            <td class="td">Phone:</td>
                            <td><input type="text" name="phone" th:value="${account.phone}"/></td>
                        </tr>
                        <tr>
                            <td class="td">Address 1:</td>
                            <td><input type="text" name="address1" th:value="${account.address1}"/></td>
                        </tr>
                        <tr>
                            <td class="td">Address 2:</td>
                            <td><input type="text" name="address2" th:value="${account.address2}" /></td>
                        </tr>
                        <tr>
                            <td class="td">City:</td>
                            <td><input type="text" name="city" th:value="${account.city}"/></td>
                        </tr>
                        <tr>
                            <td class="td">State:</td>
                            <td><input type="text" name="state" th:value="${account.state}"/></td>
                        </tr>
                        <tr>
                            <td class="td">Zip:</td>
                            <td> <input type="text" name="zip" th:value="${account.zip}"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="td">Country:</td>
                            <td><input type="text" name="country" th:value="${account.country}"/></td>
                        </tr>
                    </table>



                    <table>
                        <h3 class="title">Profile Information</h3>

                        <tr>
                            <td class="td">Language Preference:</td>
                            <td>
                                <select name="languagePreference">
                                    <option th:selected="${account == null || account.languagePreference == 'english'}" value="english">English</option>
                                    <option th:selected="${account != null && account.languagePreference == 'chinese'}" value="chinese">Chinese</option>
                                    <option th:selected="${account != null && account.languagePreference == 'japanese'}" value="japanese">Japanese</option>
                                </select>
                            </td>
                        </tr>
                        <!--<tr>
                            <td>Favourite Category:</td>
                            <td>
                                <select name="favouriteCategoryId">
                                    <option th:value="${account.favouriteCategoryId}" th:text="${account.favouriteCategoryId}"></option>
                                    <th:block th:each="categoryId : ${idList}">
                                        <option th:if="${account.favouriteCategoryId != categoryId}" th:value="${categoryId}" th:text="${categoryId}"></option>
                                    </th:block>
                                </select>
                            </td>
                        </tr>-->
                        <tr>
                            <td class="td">Enable MyList</td>
                            <td class="check">
                                <input type="radio" name="listOption" th:checked="${account.listOption==true}" />
                                <label for="enableBannerNo">yes</label>
                            </td>
                            <td class="check">
                                <input type="radio" name="listOption" th:checked="${account.listOption==false}" />
                                <label for="enableBannerNo">no</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="td">Enable MyBanner</td>
                            <td class="check">
                                <input type="radio" id="enableBannerYes" name="enableBanner" value="yes" th:checked="${account.bannerName !=null }" />
                                <label for="enableBannerYes">yes</label>
                            </td>
                            <td class="check">
                                <input type="radio" id="enableBannerNo" name="enableBanner" value="no" th:checked="${account.bannerName == null}" />
                                <label for="enableBannerNo">no</label>
                            </td>
                        </tr>

                    </table>

                    <div class="btn">
                        <input class="btn1" type="submit" name="newAccount" th:value="Update"/>

                    </div>
                </div>

            </form>
        </div>
    </div>
</div>
<script th:src="@{js/checkAccount.js}"></script>

</body>
</html>